<script setup lang="ts">
import VDialog from "@/components/VDialog/VDialog.vue";
import { computed, reactive, ref, watch } from "vue";
import {
  getSirSelfCheckDetailApi,
  type SirSelfCheckBo
} from "@/api/airport/dataManage/sirSelfCheck";

interface Props {
  modelValue: boolean;
  row?: SirSelfCheckBo;
}

const props = defineProps<Props>();
const emits = defineEmits<{
  (e: "update:modelValue", v: boolean): void;
}>();

const visible = computed({
  get: () => props.modelValue,
  set(v) {
    emits("update:modelValue", v);
  }
});

const formData = reactive<SirSelfCheckBo>({
  id: 0,
  seq: undefined,
  professional: "",
  checkContent: "",
  checkStandardCode: "",
  checkStandard: "",
  complianceCriteria: "",
  checkMethod: "",
  companyBasis: "",
  companyClause: "",
  lawsBasis: "",
  lawsClause: "",
  baseCycle: "",
  integrationSource: "",
  checkDepartments: "",
});

const loading = ref(false);

async function getDetail() {
  if (!props.row?.id) return;
  loading.value = true;
  try {
    const res = await getSirSelfCheckDetailApi(props.row.id);
    Object.assign(formData, res.data);
  } finally {
    loading.value = false;
  }
}

// Open the dialog to initialize data
watch(
  () => props.modelValue,
  val => {
    if (val) {
      // Reset form data to avoid displaying old data
      Object.assign(formData, {
        id: null,
        seq: undefined,
        professional: "",
        checkContent: "",
        checkStandardCode: "",
        checkStandard: "",
        complianceCriteria: "",
        checkMethod: "",
        companyBasis: "",
        companyClause: "",
        lawsBasis: "",
        lawsClause: "",
        baseCycle: "",
        integrationSource: "",
        checkDepartments: ""
      });
      // If there is row data, assign it first
      if (props.row) {
        Object.assign(formData, props.row);
      }
      getDetail();
    }
  },
  { immediate: true }
);

</script>

<template>
  <v-dialog
    show-full-screen
    :fixed-body-height="false"
    use-body-scrolling
    title="自查事项详情"
    v-model="visible"
    :loading="loading"
    @cancel="visible = false"
  >
    <div class="detail-container">
      <el-form :model="formData" label-width="120px" class="detail-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="seq" label="序号：">
              <span class="detail-value">{{ formData.seq }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="professional" label="专业：">
              <span class="detail-value">{{ formData.professional }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="checkStandardCode" label="检查标准编号：">
              <span class="detail-value">{{ formData.checkStandardCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="companyClause" label="公司条款：">
              <span class="detail-value">{{ formData.companyClause }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="baseCycle" label="基础周期：">
              <span class="detail-value">{{ formData.baseCycle }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="checkDepartments" label="检查涉及部门：">
              <span class="detail-value">{{ formData.checkDepartments }}</span>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="checkMethod" label="检查方式：">
              <span class="detail-value">{{ formData.checkMethod }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="companyBasis" label="公司依据：">
              <span class="detail-value">{{ formData.companyBasis }}</span>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>



      <div class="info-describe-section">
        <label class="section-label">融合来源</label>
        <div class="detail-textarea-value">{{ formData.integrationSource }}</div>
      </div>

      <div class="info-describe-section">
        <label class="section-label">检查内容</label>
        <div class="detail-textarea-value">{{ formData.checkContent }}</div>
      </div>

      <div class="info-describe-section">
        <label class="section-label">检查标准</label>
        <div class="detail-textarea-value">{{ formData.checkStandard }}</div>
      </div>

      <div class="info-describe-section">
        <label class="section-label">符合性判定标准</label>
        <div class="detail-textarea-value">{{ formData.complianceCriteria }}</div>
      </div>

      <div class="info-describe-section">
        <label class="section-label">法律法规依据</label>
        <div class="detail-textarea-value">{{ formData.lawsBasis }}</div>
      </div>

      <div class="info-describe-section">
        <label class="section-label">法律法规条款</label>
        <div class="detail-textarea-value">{{ formData.lawsClause }}</div>
      </div>
    </div>
  </v-dialog>
</template>

<style scoped lang="scss">
.detail-container {
  padding: 20px;
  background-color: #fcfcfc;
  border-radius: 8px;
}

.detail-form {
  margin-bottom: 20px;
}

.detail-value {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

.info-describe-section {
  margin-top: 20px;
}

.section-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.detail-textarea-value {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}
</style>
